<template>
  <div>
    <page-header
      v-bind="merchantUpgradeHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="merchantUpgradeContentConfig"
      :single-btn-config="singleBtnConfig"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
      <template #companyUpgradeImageList="row">
        <el-image
          style="width: 100px; height: 100px"
          :src="row[row.prop] && row[row.prop][0]"
          preview-teleported
          :preview-src-list="row[row.prop]"
          :initial-index="0"
          fit="cover"
        />
      </template>
      <template #userInfo="row">
        <div class="info">
          <div>账号：{{ row.userName }}</div>
          <div>店铺名：{{ row.storeName }}</div>
          <div>身份证：{{ row.identityCard }}</div>
          <el-button
            size="small"
            plain
            text
            bg
            :type="storeCompanyTypeColor(row.storeCompanyType)"
            >{{ storeCompanyTypeText(row.storeCompanyType) }}
          </el-button>
        </div>
      </template>
      <template #applyStatus="row">
        <el-button
          size="small"
          plain
          text
          bg
          :type="applyStatusColor(row[row.prop])"
          >{{ applyStatusText(row[row.prop]) }}
        </el-button>
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
import merchantUpgradeHeaderConfig from '@/views/main/system/merchant/companyStore/config/header-config'
import PageContent from '@/components/page-content/page-content.vue'
import merchantUpgradeContentConfig from '@/views/main/system/merchant/companyStore/config/content-config'
import usePageHeader from '@/hooks/use-page-header'

// 计算属性
const storeCompanyTypeText = computed(() => {
  return (num: number) => {
    let text
    num === 0 && (text = '普通店')
    num === 1 && (text = '专营店')
    num === 2 && (text = '专卖店')
    num === 3 && (text = '旗舰店')
    return text
  }
})
const storeCompanyTypeColor = computed(() => {
  return (num: number) => {
    let color
    num === 0 && (color = 'primary')
    num === 1 && (color = 'info')
    num === 2 && (color = 'danger')
    num === 3 && (color = 'warning')
    return color
  }
})
const applyStatusText = computed(() => {
  return (num: number) => {
    let text
    num === 0 && (text = '未通过')
    num === 1 && (text = '已通过')
    num === 2 && (text = '已驳回')
    return text
  }
})
const applyStatusColor = computed(() => {
  return (num: number) => {
    let color
    num === 0 && (color = 'danger')
    num === 1 && (color = 'info')
    num === 2 && (color = 'warning')
    return color
  }
})

// ============================= page-header ===============================
const { pageContentRef, searchClick, resetClick } = usePageHeader()

// ============================= page-content ================================
const singleBtnConfig = ref()
// 子传父
// 0.点击表单框的确定按钮
const handleConfirmClick = () => {
  singleBtnConfig.value = null
}

const handleCancelClick = () => {
  singleBtnConfig.value = null
}
</script>

<style scoped>
.info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>
